<template>
	<view class="container">
		<view class="tabbar border-b"><view class="tab border-r" :class="Index==1?'select':''" style="color:gray;" @click="Search(1)">普通程序案由</view><view class="tab" :class="Index==2?'select':''" style="color:gray" @click="Search(2)">简易程序案由</view></view>
		<view class="keyword"><input name="Name" :placeholder="'请输入'+(Index==1?'普通':'简易')+'程序案由名称开始搜索'" placeholder-class="gray" value="" @input="NameInput" @click="ShowResult()"/></view>
		<view class="list" v-if="IsShow && ResultList.length>0">
		   <view class="li border-b" v-for="item in ResultList" @click='Sure(item)'>{{item.Name}}</view>		   
		</view>
		<view class="list" v-if="IsShow && ResultList.length==0">
			<view class="nodata"></view>
			<view class="loadmore" style="font-size:36rpx;">未搜索到任何案由</view>			
		</view>
		<template v-if="Item.ID>0">
			<view class="line" v-if="Item.Name!=''"><view class="name">案由名称：</view><view class="text">{{Item.Name}}</view></view>
			<view class="line" v-if="Item.Violated!=''"><view class="name">违反条例：</view><view class="text">{{Item.Violated}}</view></view>
			<view class="line" v-if="Item.LegalBasis!=''"><view class="name">处罚依据：</view><view class="text">{{Item.LegalBasis}}</view></view>
			<view class="line" v-if="Item.Light!=''"><view class="name">轻微违法：</view><view class="text">{{Item.Light}}</view></view>
			<view class="line" v-if="Item.Commonly!=''"><view class="name">一般违法：</view><view class="text">{{Item.Commonly}}</view></view>
			<view class="line" v-if="Item.Serious!=''"><view class="name">严重违法：</view><view class="text">{{Item.Serious}}</view></view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Index:1,
				Item:{ID:0},
				List:[],
				Keyword:'',
				IsShow:false,
				ResultList:[]
			}
		},
		onLoad(options) {
			this.Index=options.Index;
			this.Find_CauseAction();
		},
		methods:{
			Sure(Item){
				this.IsShow=false;
				setTimeout(()=>{
					this.Item=Item;					
				},300);				
			},
			ShowResult(){				
				this.IsShow=true;
			},
			Search(Index){
				this.Index=Index;
				this.Item={ID:0};
				this.IsShow=true;
				this.Find_CauseAction();
			},
			NameInput(e){
				this.Keyword = e.detail.value;
				this.Filter();
			},
			Filter(){
				this.ResultList=[];
				this.List.forEach(item=>{
					if(item.Name.indexOf(this.Keyword)>-1){
						this.ResultList.push(item);
					}
				});
			},
			Find_CauseAction(){
				var data={};
				data.Act=this.Index==1?"Find_CauseAction":"Find_EasyCauseAction";
				data.Keyword=this.Keyword;
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					this.List= json.Data.List;
					this.ResultList=this.List;
					this.Filter();
				});
			}
		}
	}
</script>

<style lang="scss">
	page{background-color: #efefef; padding-top:100rpx;}
	.container{ padding-bottom: 120rpx;}
	.tabbar{width:100%; height:100rpx; line-height: 100rpx; position: fixed; top:0rpx; left:0rpx; display:flex; flex-direction: row; z-index:99999;
		.tab{width:50%; height:100%; background-color: #ffffff; text-align:center; font-size:36rpx;}
		.select{background-color: #ffffff; color:#127bfe !important;}
	}
	.keyword{width:750rpx; height:90rpx; margin-top:20rpx; padding-left:25rpx;
		input{width:700rpx; height: 100%; border-radius: 10rpx; font-size: 36rpx; background-color: #ffffff; padding-left:20rpx;}
	}
	.line{width:700rpx; height:auto; margin-left:25rpx; margin-top:20rpx; padding:25rpx;  border-radius: 10rpx; background-color: #ffffff;
		.name{width:100%; height:60rpx; font-size:36rpx; color:#000000;}
		.text{width:100%; height:auto; font-size:36rpx; color:darkgray;}
	}
	.list{width:700rpx; height:calc(100vh - 250rpx); position: fixed; top:220rpx; left:25rpx; padding-top:10rpx; padding-bottom: 10rpx; border:1rpx solid #d3d2d2; border-radius: 10rpx; background-color: #ffffff; overflow-y: auto;
		.li{width:100%; min-height:86rpx; line-height: 46rpx; padding:20rpx; font-size:36rpx; overflow: hidden;}
		.li:hover{background-color: #3a6abc; color:#ffffff;}
	}
</style>
